<!-- page content -->
<div id="myVue" class="right_col" role="main">
	<div class="">
		<div class="page-title">
			<div class="title_left">
				<h3>Vue Index Page</h3>
			</div>
		</div>

		<div class="clearfix"></div>
		<p>============================</p>
		<h3>获取数据</h3>
		<p>name: {{user.name}}</p>
		<p>============================</p>
		<h3>单向绑定数据</h3>
		<input type="text" :value="user.name" />
		<p>============================</p>
		<h3>双向绑定数据</h3>
		<input type="text" v-model:value="user.name" />
		<input type="text" v-model="user.gender" />
		<p>============================</p>
		<h3>循环绑定数据</h3>
		<select>
			<option v-for="(city, index) in cities" :value="city.cityId">{{city.cityName}}</option>
		</select>
		<table>
			<thead>
				<tr>
					<td>id</td>
					<td>name</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(city, index) in cities">
					<td>{{city.cityId}}</td>
					<td>{{city.cityName}}</td>
				</tr>
			</tbody>
		</table>
		<p>============================</p>
		<h3>绑定事件</h3>
		<button @click="test_1()">test_1</button>
		<button id="test_2" price="22.33" @click="test_2($event)">test_2</button>
		<p>============================</p>
		<h3>自定义模版</h3>
		<button-demo></button-demo>
		<button-count></button-count>
	</div>
</div>
<!-- /page content -->

<script>
	$(function () {
		test_1();
	});

	Vue.component("button-demo", {
		template: "<button>button-demo</button>",
	});

	// 组件方式一
	Vue.component("button-count", {
		data: function () {
			return {
				count: 0,
			};
		},
		methods: {
			count_fun: function () {
				this.count += 1;
			},
		},
		template: "<button @click='count_fun()'>{{count}}</button>",
	});

	// .vue 组件

	var myVue = new Vue({
		el: "#myVue",
		data: {
			user: {
				name: "hujiang",
				age: 18,
				gender: "male",
			},
			cities: [
				{
					cityId: "1",
					cityName: "chengdu",
				},
				{
					cityId: "2",
					cityName: "wuhan",
				},
			],
		},
		methods: {
			test_1: function () {
				console.log(this.user);
			},
			test_2: function (event) {
				console.log(event);
				console.log(event.originalTarget);
				console.log(event.originalTarget.attributes.getNamedItem("price").name);
				console.log(event.originalTarget.attributes.getNamedItem("price").value);
			},
			initCities: function () {
				var countryId = 522;
				var self = this;
				$.ajax({
					url: "/api/cities/" + countryId,
					type: "get",
					// contentType: "application/json",
					// data: JSON.stringify(self.searchBean),
					success: function (rs) {
						self.cities = rs;
					},
					error: function (data) {
						layer.alert(data.responseText, { icon: 0 });
					},
				});
			},
		},
		// 将 Vue 函数赋值给 window 时，在此挂钩
		created: function () {
			window.test_1 = this.test_1;
		},
		// mounted 生命周期挂钩子 ---- 初始化页面函数的时候，在此处挂钩
		mounted: function () {
			// this.initCities();
		},
	});
</script>
